// 培养计划展示界面
<template>
    <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header class="el-header" style="height: 2px; width: 100%">
    </el-header>
        <!-- 身体区域 -->
        <el-container>
            <!-- 左边区域 -->
            <el-aside class="el-aside">
                <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <!-- 卡片标签 -->
                    <span>培养计划</span>
                    <el-button @click="AddPlanDialogVisible = true" style="float: right; padding: 3px 0" type="text">添加计划</el-button>
                </div>
                <div :index="menu.id+''" v-for="menu in this.num" :key="menu.id" class="text item">
                    
                    <!-- 抽屉标签 -->
                    <!-- 给button动态赋值 -->
                    <el-button @click="oneDrawer(menu.trainingPlanName)" type="primary" v-text="menu.trainingPlanName" style="margin-left: 16px;"></el-button>
                    <el-drawer title="培养计划" :visible.sync="drawer" size="72%">

                        <div style="margin-left: 5%;">
                            <!-- Tabs 标签页 -->
                            <el-tabs v-model="activeName" @tab-click="handleClick(oneValue)">
                                
                                <!-- 第一个按钮 -->
                                <el-tab-pane label="学习培养计划" name="second">
                                    <el-card class="box-card" style=" width: 60% ; margin-left: 2%;">
                                    <div slot="header" class="clearfix">
                                        <el-button>计划实现</el-button>
                                        <el-button @click="AddStudyDialogVisible = true" style="float: right; padding: 3px 0" type="text">添加计划</el-button>
                                    </div>
                                    <div :index="menu.id+''" v-for="menu in numSecond" :key="menu.id" class="text item">
                                        <el-button @click="twoInnerDrawer(menu.projectName,second)" v-text="menu.projectName"></el-button>
                                    </div>

                                </el-card>
                                </el-tab-pane>
                                <!-- 第二个按钮 -->
                                <el-tab-pane label="兴趣培养计划" name="first">
                                    <el-card class="box-card" style=" width: 60% ; margin-left: 2%;">
                                        <div slot="header" class="clearfix">
                                            <el-button >兴趣培养</el-button>
                                            <el-button @click="AddInterestDialogVisible = true" style="float: right; padding: 3px 0" type="text">添加兴趣</el-button>
                                        </div>
                                        <div :index="menu.id+''" v-for="menu in numFirst" :key="menu.id" class="text-item">
                                            <el-button @click="twoInnerDrawer(menu.projectName,first)" v-text="menu.projectName"></el-button>
                                        </div>
                                    </el-card>
                                </el-tab-pane>
                                <!-- 第三个按钮 -->
                                <el-tab-pane label="生活技能掌握" name="third">
                                    <el-card class="box-card" style=" width: 60% ; margin-left: 2%;">
                                        <div slot="header" class="clearfix">
                                            <el-button>掌握技能</el-button>
                                            <el-button @click="AddSkillDialogVisible = true" style="float: right; padding: 3px 0" type="text">添加技能</el-button>
                                        </div>
                                        <div :index="menu.id+''" v-for="menu in numThird" :key="menu.id" class="text item">
                                            <el-button @click="twoInnerDrawer(menu.projectName,third)" v-text="menu.projectName"></el-button>
                                        </div>
                                    </el-card>
                                </el-tab-pane>

                                <!-- 第四个按钮 -->
                                <el-tab-pane label="获得荣誉" name="fourth">
                                    <el-card class="box-card" style=" width: 60% ; margin-left: 2%;">
                                        <div slot="header" class="clearfix">
                                            <el-button>荣誉展示</el-button>
                                            <el-button @click="AddHonorDialogVisible = true" style="float: right; padding: 3px 0" type="text">添加荣誉</el-button>
                                        </div>
                                        <div :index="menu.id+''" v-for="menu in numFourth" :key="menu.id" class="text item">
                                            <el-button @click="twoInnerDrawer(menu.projectName,fourth)" v-text="menu.projectName"></el-button>
                                        </div>
                                    </el-card>
                                </el-tab-pane>
                            </el-tabs>


                            <!-- 第二层界面 -->
                            <el-drawer title="培养成果" :append-to-body="true" :before-close="handleClose" :visible.sync="innerDrawer" size="52%">
                                <el-card class="box-card" style=" width: 90% ;margin-left: 5%;">
                                <div slot="header" class="clearfix">
                                    <el-button @click="honorHandlecClose">荣誉证明</el-button>
                                </div>
                                <div v-for="(item,o) in numSecond" :key="o" class="text item">
                                    <div>{{ item.date }}</div>
                                    <div>{{ item.planContent }}</div>
                                    <!-- <div>
                                        <ul>
                                            <li>
                                                
                                            </li>
                                        </ul>
                                    </div> -->
                                </div>
                                </el-card>
                            </el-drawer>


                        </div>
                    </el-drawer>
                </div>
                </el-card>
                
                <!-- 培养计划 -->
                <el-dialog title="添加计划" :visible.sync="AddPlanDialogVisible" width="50%"  @close="AddPlanClose">
                <el-form :model="AddPlanRefModel" :rules="AddPlanCat" ref="AddPlanRef" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="计划名称" prop="trainingPlanName">
                        <el-input v-model="AddPlanRefModel.trainingPlanName"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="AddPlanDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="AddPlanBtn">确 定</el-button>
                </span>
                </el-dialog>

                <!-- 学习培养计划 -->
                <el-dialog title="添加计划" :visible.sync="AddStudyDialogVisible" width="50%"  @close="AddStudyClose">
                <el-form :model="AddStudyRefModel" :rules="AddStudyCat" ref="AddStudyRef" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="计划名称" prop="projectName">
                        <el-input v-model="AddStudyRefModel.projectName"></el-input>
                    </el-form-item>
                    <el-form-item label="具体计划" prop="planContent">
                        <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 4}" placeholder="请输入内容" v-model="AddStudyRefModel.planContent"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="AddStudyDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="AddStudyBtn(oneValue)">确 定</el-button>
                </span>
                </el-dialog>

                <!-- 兴趣培养计划 -->
                <el-dialog title="添加计划" :visible.sync="AddInterestDialogVisible" width="50%"  @close="AddInterestClose">
                <el-form :model="AddInterestRefModel" :rules="AddInterestCat" ref="AddInterestRef" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="计划名称" prop="projectName">
                        <el-input v-model="AddInterestRefModel.projectName"></el-input>
                    </el-form-item>
                    <el-form-item label="具体计划" prop="planContent">
                        <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 4}" placeholder="请输入内容" v-model="AddInterestRefModel.planContent"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="AddInterestDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="AddInterestBtn(oneValue)">确 定</el-button>
                </span>
                </el-dialog>

                <!-- 生活技能掌握 -->
                <el-dialog title="添加计划" :visible.sync="AddSkillDialogVisible" width="50%"  @close="AddSkillClose">
                <el-form :model="AddSkillRefModel" :rules="AddSkillCat" ref="AddSkillRef" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="计划名称" prop="projectName">
                        <el-input v-model="AddSkillRefModel.projectName"></el-input>
                    </el-form-item>
                    <el-form-item label="技能描述" prop="planContent">
                        <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 4}" placeholder="请输入内容" v-model="AddSkillRefModel.planContent"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="AddSkillDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="AddSkillBtn(oneValue)">确 定</el-button>
                </span>
                </el-dialog>

                <!-- 获得荣誉 -->
                <el-dialog title="添加计划" :visible.sync="AddHonorDialogVisible" width="50%"  @close="AddHonorClose">
                <el-form :model="AddHonorRefModel" :rules="AddHonorCat" ref="AddHonorRef" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="荣誉名称" prop="projectName">
                            <el-input v-model="AddHonorRefModel.projectName"></el-input>
                        </el-form-item>
                        <el-form-item label="荣誉描述" prop="planContent">
                            <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 4}" placeholder="请输入内容" v-model="AddHonorRefModel.planContent"></el-input>
                        </el-form-item>

                        <div class="tupiansahngchuan">
                            <el-upload :action="fileUploadUrl" ref='files' list-type="picture-card" :auto-upload="true" :on-success="HandleSuccess" multiple >
                                <i slot="default" class="el-icon-plus"></i>
                                <div slot="file" slot-scope="{file}">
                                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                                    <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                        <i class="el-icon-zoom-in"></i>
                                    </span>
                                    <!-- <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                        <i class="el-icon-download"></i>
                                    </span> -->
                                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                        <i class="el-icon-delete"></i>
                                    </span>
                                    </span>
                                </div>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                            </div>
                    </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="AddHonorDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="AddHonorBtn(oneValue)">确 定</el-button>
                </span>
                </el-dialog>


            </el-aside>
            <!-- 右边区域 -->
            <el-main class="el-main">
                <!-- 走马灯标签 -->
            <div id="banner" style="height=1418px;width:1148px">
                <!--动态将图片轮播图的容器高度设置成与图片一致-->
                <el-carousel  height="450px" >
                    <!--遍历图片地址,动态生成轮播图-->
                    <el-carousel-item v-for="(item,index) in honorUrls" :key="index">
                    <img :src="item" alt="">
                    </el-carousel-item>
                </el-carousel>
            </div>

            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    name: "Banner",
    //页面进行初始化的时候开始调用回调函数
    created(){
    //动态获取界面信息
    this.getMenuList()
    //设定模式选中按钮
    // this.defaultActive = window.sessionStorage.getItem("activeMenu")
    },
    data() {
        return {
            fileUploadUrl:"http://localhost:8099/file/upload",
             /* 图片上传 */
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            num: 0,
            numSecond: 0,
            numFirst: 0,
            numThird: 0,
            numFourth: 0,

            oneValue: '',
            second: 1,
            first: 2,
            third:3,
            fourth:4,

            // 走马灯图片地址数组
            img_list: [
                { url: require("../assets/images/imagetp/1.png") },
                { url: require("../assets/images/imagetp/2.png") },
                { url: require("../assets/images/imagetp/3.png") },
                { url: require("../assets/images/imagetp/4.png") },
            ],
            // 走马灯图片父容器高度
            bannerHeight: 1000,
            // 走马灯浏览器宽度
            screenWidth: 500,
            browseHonor: {
                parentId:'',
                honorUrl: []
            },
            honorUrls: [],


            drawer: false,
            innerDrawer: false,
            activeName: 'second',
            AddPlanDialogVisible: false,
            AddStudyDialogVisible: false,
            AddInterestDialogVisible: false,
            AddSkillDialogVisible:false,
            AddHonorDialogVisible:false,
            AddPlanRefModel:{
                trainingPlanName: '',
            },
            AddStudyRefModel:{
                trainingPlanName: '' ,
                projectName: '',
                planContent: '',
            },
            AddInterestRefModel:{
                trainingPlanName: '' ,
                projectName: '',
                planContent: '',
            },
            AddSkillRefModel:{
                trainingPlanName: '' ,
                projectName: '',
                planContent: '',
            },
            AddHonorRefModel:{
                trainingPlanName: '' ,
                projectName: '',
                planContent: '',
                honorPath:[],
                honorUrl:[]
            },
            plannametext: '',
            Studynametext:'',
            Interestnametext:'',
            Skillnametext:'',
            Honornametext:'',
            AddPlanCat: {
                planname: [
                        { required: true, message: '计划名称不能为空，请先输入名称', trigger: 'blur' },
                        ]
            },
            AddStudyCat: {
                projectName: [
                        { required: true, message: '计划名称不能为空，请先输入名称', trigger: 'blur' },
                        ]
            },
            AddInterestCat: {
                projectName: [
                        { required: true, message: '计划名称不能为空，请先输入名称', trigger: 'blur' },
                        ]
            },
            AddSkillCat: {
                projectName: [
                        { required: true, message: '计划名称不能为空，请先输入名称', trigger: 'blur' },
                        ]
            },
            AddHonorCat: {
                projectName: [
                        { required: true, message: '计划名称不能为空，请先输入名称', trigger: 'blur' },
                        ]
            },


        };
    },
    //页面进行初始化的时候开始调用回调函数
    created(){
    //动态获取相册信息
    this.getMenuList()
    this.browsePhoto()
    //设定模式选中按钮
    // this.defaultActive = window.sessionStorage.getItem("activeMenu")

    },

    methods: {
        honorHandlecClose(done){
            this.$confirm('温馨提示：请点击右上角的X关闭两层窗口进行查看！')
            .then(_ => {
            done();
            })
            .catch(_ => {});
        
        },
        handleClose(done) {
            this.$confirm('确定关闭当前窗口？')
            .then(_ => {
            done();
            })
            .catch(_ => {});
        },

        //上传图片删除操作
        async handleRemove(file) {
        console.log(file)
        //移除数组中的数据
            let virtualPath = file.response.data.virtualPath
            //通过findIndex函数 获取数组中指定数据的位置
            let index = this.lifeModelForm.lifePhoto.findIndex(x => x === virtualPath)
            //删除数组中指定的数据
            this.lifeModelForm.lifePhoto.splice(index, 1)
            //删除服务中的文件
            let {
            data: result
            } = await this.$http.delete("/file/deleteFile", {
            params: {
                virtualPath: virtualPath
            }
            })
            // 获取到该组件调用handleRemove方法删除file对象
            this.$refs.files.handleRemove(file)
            if (result.status !== 200) return this.$message.error("删除图片失败")
            this.$message.success("删除图片成功")
        },

        //预览图片的方法   上传图片成功之后 图片需要展现时调用
        handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
        },

        //如果文件上传成功之后调用
        HandleSuccess(response, file) {
            if (response.status !== 200) return this.$message.error("文件上传失败")
            file.name = response.data.fileName
            //获取虚拟路径
            let virtualPath = response.data.virtualPath
            // console.log(virtualPath)
            let path= response.data.urlPath
            // console.log(path)
            //将数据封装到Form表单中
            this.AddHonorRefModel.honorPath.push(virtualPath)
            this.AddHonorRefModel.honorUrl.push(path)
        },

        //查询相册里面的图片
        async browsePhoto() {
            const {data: result} =  await this.$http.get('/training/getBrowseTrainingList')
            if(result.status !== 200) return this.$message.error("图片查询失败！")
            //如果请求正常,则将返回值结果赋值给vue的data
            this.browseHonor = result.data
            // console.log(this.browseHonor)
            for (let i = 0; i < this.browseHonor.length; i++) {
                const element = this.browseHonor[i];
                // console.log(this.browseHonor[i])
                this.honorUrls=(element.honorUrl||'').split(',')
                // console.log(this.honorUrls)
            
                
            }
        },

        // 标签页按钮
        async handleClick(parameter) {
            if(this.activeName == 'first'){
                console.log("parameter:"+parameter)
        	    // 触发‘获得荣誉’事件
            const {data: result} =  await this.$http.get('/training/AddSecondTrainingPlan?'+"parentId=2"+"&trainingPlanName"+"="+parameter)
            this.numFirst = result.data
            }else if(this.activeName == 'third'){
            // 触发‘兴趣培养计划’事件
            const {data: result} =  await this.$http.get('/training/AddSecondTrainingPlan?'+"parentId=3"+"&trainingPlanName"+"="+parameter)
            this.numThird = result.data
            }else if(this.activeName == 'fourth'){
            // 触发‘生活技能掌握’事件
            const {data: result} =  await this.$http.get('/training/AddSecondTrainingPlan?'+"parentId=4"+"&trainingPlanName"+"="+parameter)
            this.numFourth = result.data
            }
            else{
            
            // 触发‘学习培养计划’事件
            const {data: result} =  await this.$http.get('/training/AddSecondTrainingPlan?'+"parentId=1"+"&trainingPlanName"+"="+parameter)
            this.numSecond = result.data
            }

        },


        //查询一级抽屉信息
        async getMenuList() {
        const {data: result} =  await this.$http.get('/training/getTrainingPlan')
        if(result.status !== 200) return this.$message.error("相册菜单查询失败！")
        //如果请求正常,则将返回值结果赋值给vue的data
        this.num = result.data
        // console.log(this.num)
        },

        // 查询二级抽屉信息parent_id=0
        async oneDrawer(parameter){
            // console.log("第一级："+parameter)
            this.oneValue = parameter;
            this.drawer = true
            const {data: result} =  await this.$http.get('/training/AddSecondTrainingPlan?'+"parentId=1"+"&trainingPlanName"+"="+parameter)
            if(result.status !== 200) return this.$message.error("内容查询失败！")
            //如果请求正常,则将返回值结果赋值给vue的data
            this.numSecond = result.data
            // console.log(this.numSecond)
        },
        /* 添加培养计划 */
        AddPlanBtn(num){
            //1.获取表单数据
            this.$refs.AddPlanRef.validate(async (valid) => {
                //2.当程序没有通过校验时 程序终止
                if (!valid) return;
                //3.发起ajax请求, 实现业务调用
                //参数1: url地址   参数2:传递的数据
                // console.log(this.AddPlanRefModel)
                let { data: result } = await this.$http.post("/training/AddTrainingPlan",this.AddPlanRefModel);
                if(result.status !== 200) return this.$message.error("添加失败！")
			this.$message.success("添加成功！")
            this.getMenuList(),
            this.AddPlanDialogVisible = false,
            //重置表格数据
            this.$refs.AddPlanRef.resetFields()
            });
        },
        AddPlanClose(){
        //重置表格数据
        this.$refs.AddPlanRef.resetFields()
        },

        // 添加学习培养计划
        AddStudyBtn(parameter){
            console.log("第二级："+parameter)
           //1.获取表单数据
            this.$refs.AddStudyRef.validate(async (valid) => {
                //2.当程序没有通过校验时 程序终止
                if (!valid) return;
                //3把一级菜单的名字赋值到AddStudyRefModel表单中
                this.AddStudyRefModel.trainingPlanName=parameter
                //4.发起ajax请求, 实现业务调用
                //参数4.1: url地址   参数4.2:传递的数据
                let { data: result } = await this.$http.post("/training/AddTrainingStudy",this.AddStudyRefModel);
                if(result.status !== 200) return this.$message.error("添加失败！")
			this.$message.success("添加成功！")
            this.AddStudyDialogVisible = false,
            //重置表格数据
            this.$refs.AddStudyRef.resetFields() 
            });
        },
        AddStudyClose(){
        //重置表格数据
        this.$refs.AddStudyRef.resetFields()
        },

        // 添加兴趣培养计划
        AddInterestBtn(parameter){
             //1.获取表单数据
            this.$refs.AddInterestRef.validate(async (valid) => {
                //2.当程序没有通过校验时 程序终止
                if (!valid) return;
                //3把一级菜单的名字赋值到AddStudyRefModel表单中
                this.AddInterestRefModel.trainingPlanName=parameter
                //4.发起ajax请求, 实现业务调用
                //参数4.1: url地址   参数4.2:传递的数据
                let { data: result } = await this.$http.post("/training/AddTrainingInteres",this.AddInterestRefModel);
                if(result.status !== 200) return this.$message.error("添加失败！")
			this.$message.success("添加成功！")
                this.handleClick()
            this.AddInterestDialogVisible = false,
            //重置表格数据
            this.$refs.AddInterestRef.resetFields()
            
            });
        },
        AddInterestClose(){
        //重置表格数据
        this.$refs.AddInterestRef.resetFields()
        },

        // 添加生活技能掌握
        AddSkillBtn(parameter){
            //1.获取表单数据
            this.$refs.AddSkillRef.validate(async (valid) => {
                //2.当程序没有通过校验时 程序终止
                if (!valid) return;
                //3把一级菜单的名字赋值到AddStudyRefModel表单中
                this.AddSkillRefModel.trainingPlanName=parameter
                //4.发起ajax请求, 实现业务调用
                //参数4.1: url地址   参数4.2:传递的数据
                let { data: result } = await this.$http.post("/training/AddTrainingSkill",this.AddSkillRefModel);
                if(result.status !== 200) return this.$message.error("添加失败！")
			this.$message.success("添加成功！")
                this.handleClick()
            this.AddSkillDialogVisible = false,
            //重置表格数据
            this.$refs.AddSkillRef.resetFields()
            
            });
        },
        AddSkillClose(){
        //重置表格数据
        this.$refs.AddSkillRef.resetFields()
        },

        //添加获得荣誉
        AddHonorBtn(parameter){
            this.fileuploadUrl;
            // console.log("第二级444："+parameter)
            //1.获取表单数据
            this.$refs.AddHonorRef.validate(async (valid) => {
                //2.当程序没有通过校验时 程序终止
                if (!valid) return;
                //3把一级菜单的名字赋值到AddStudyRefModel表单中
                this.AddHonorRefModel.trainingPlanName=parameter
                
                this.AddHonorRefModel.honorPath=this.AddHonorRefModel.honorPath.join(",");
                this.AddHonorRefModel.honorUrl=this.AddHonorRefModel.honorUrl.join(",");
                //4.发起ajax请求, 实现业务调用
                //参数4.1: url地址   参数4.2:传递的数据
                let { data: result } = await this.$http.post("/training/AddTrainingHonor",this.AddHonorRefModel);
                if(result.status !== 200) return this.$message.error("添加失败！")
			this.$message.success("添加成功！")
                this.handleClick()
            this.AddHonorDialogVisible = false,
            //重置表格数据
            this.$refs.AddHonorRef.resetFields()
            
            });
        },
        AddHonorClose(){
        //重置表格数据
        this.$refs.AddHonorRef.resetFields()
        },
        
        // 查询第二级的参数
        async twoInnerDrawer(parameter,id){
            // console.log('第三级参数：'+parameter)
            // console.log('第三级参数：'+id)
            this.innerDrawer = true
            const {data: result} =  await this.$http.get('/training/AddInnerDrawerTrainingPlan?'+"parentId="+id+"&projectName="+parameter)
            if(result.status !== 200) return this.$message.error("内容查询失败！")
            //如果请求正常,则将返回值结果赋值给vue的data
            this.numSecond = result.data
            // console.log(this.numSecond)

            for (let i = 0; i < this.numSecond.length; i++) {
                const element = this.numSecond[i];
                // console.log(this.numSecond[i])
                this.honorUrls=(element.honorUrl||'').split(',')
                // console.log(this.honorUrls)
            
                
            }
        },
        setSize: function () {
            // 通过浏览器宽度(图片宽度)计算高度
            this.bannerHeight = (200 / 1920) * this.screenWidth;
            },
        },
        mounted() {
            // 首次加载时,需要调用一次
            this.screenWidth = window.innerWidth;
            this.setSize();
            // 窗口大小发生改变时,调用一次
            window.onresize = () => {
            this.screenWidth = window.innerWidth;
            this.setSize();
            };
        },
    
}

</script>

<style lang="less" scoped>
/* 布局标签 */
.el-header {
    padding: 0;
    box-sizing: none;
    background-image: url(../assets/login.png);
    
}
.el-aside{
    width: 200px; 
}
/* 卡片标签 */
.home-container{
    height: 100%;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both
}

.box-card {
    width: 298px;
}
.el-drawer__header {
    align-items: center;
    color: #0a11ea;
    display: flex;
    margin-bottom: 32px;
    padding: 2% 5% 0;
}

.el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }
    
    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }
    
    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    img{
        /*设置图片宽度和浏览器宽度一致*/
        width: 100%;
        height: inherit;
    }


</style>